<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    
</head>
<body>
    <div class="content">
        <header>
            <div class="tou">
                <div class="left">
                    <img src="../img/logo.png" alt="">
                    H5实战页面
                </div>
                <div class="right nav">
                        <a href="javascript:;" class="nav-item is-active" active-color="red">实战课程</a>
                        <a href="javascript:;" class="nav-item" active-color="red">商业案例</a>
                        <a href="javascript:;" class="nav-item" active-color="red">课程体系</a>
                        <a href="javascript:;" class="nav-item" active-color="red">集成环境</a>
                        <a href="javascript:;" class="nav-item" active-color="red">云端学习</a>
                        <a href="javascript:;" class="nav-item jsxx" active-color="red">即刻学习</a>
                        <span class="nav-indicator"></span>
                </div>
            </div>
           <h1>实战课程重磅上线</h1>
           <p style="font-weight:300;">一键云学习,还在等什么?</p>
        </header>
        <div class="baner">
            <h1>每门课都是<span class="dire">真</span>实商业案例</h1>
            <p>
                真实案例，真实场景，在实战中实践、操作、调试 <br>
                大牛带你体验BA真实开发流程，所有开发过程一为你呈现
            </p>
            <div class="tupian">
                <img src="../img/sc2-1.png" alt="" id="img1">
            <img src="../img/sc2-2.png" alt="" id="img2">

            </div>
        </div>
        <div class="baner1">
            <img src="../img/sc3.png" alt="" id="img3">
            <div class="qd">
                <h1><span class="dire">强大</span>的语言课程体系支持</h1>
                <p>学习环境与课程轻松对接，安装、调试、写入、部置、运行，一站式解决 <br>
                    ,让你体验开发全流程</p>
                <div class="five">
                 <div class="yi">HTML5</div>
                 <div class="er">PHP</div>
                 <div class="san">JAVA</div>
                 <div class="si">Python</div>
                 <div class="wu">Node.js</div>
                </div>
            </div>

        </div>
        <div class="baner baner3">
            <h1>省去本地复<span class="dire">杂</span>的环境搭建</h1>
            <p>
                你可以告别在虚拟机中调试开发了
            </p>
            <div class="four">
             <div>
                 <img src="../img/sc4-1.png" alt="">
                 <p>实战课程集成开发环境</p>
             </div>
             <div>
                <img src="../img/sc4-2.png" alt="">
                <p>内置终端命令行</p>
             </div>
             <div>
                <img src="../img/sc4-3.png" alt="">
                <p>编译你的应用程序</p>
             </div>
             <div>
                <img src="../img/sc4-4.png" alt="">
                <p>编译你的应用程序</p>
             </div>
            </div>
        </div>
        <div class="baner4">
            <img src="../img/sc5-1.png" alt="" id="img5">
            <h1>学习云计算<span class="ky">可以</span>这样简单</h1>
            <p>看视频，敲代码，气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</p>
        </div>
        <div class="baner5">
            <a href="#"><button>继续了解学习体验</button></a>
        </div>
        <div class="footer">
         <div class="jieshu">
            <div>网站首页</div>
            <div>人才招聘</div>
            <div>联系我们</div>
            <div>高粒联盟</div>
            <div>关于我们</div>
            <div>讲师招募</div>
            <div>关于我们</div>
            <div>意见反馈</div>
            <div>友情链接</div>
         </div>
         <p style="color: #404444;">Copyright©2015 imooc.com All Rights Reserved|京ICP备13046642号-2</p>
        </div>
        </div>
    
    </div>
  
</body>
</html>
<script>
    var indicator = document.querySelector('.nav-indicator');
var items = document.querySelectorAll('.nav-item');
function handleIndicator(el) {
  
  items.forEach(function (item) {
      
    item.classList.remove('is-active');
    item.removeAttribute('style');
  });
  console.log(el.offsetLeft)
  if(el.offsetLeft==26){
    window.scrollTo(0, 0)
  }else if(el.offsetLeft==143){
    window.scrollTo(0, 500)
  }else if(el.offsetLeft==258){
    window.scrollTo(0, 1000)
  }else if(el.offsetLeft==374){
    window.scrollTo(0, 1600)
  }else if(el.offsetLeft==491){
    window.scrollTo(0, 2100)
  }else if(el.offsetLeft==606){
    window.scrollTo(0, 0)
  }
  indicator.style.width = "".concat(el.offsetWidth, "px");
  indicator.style.left = "".concat(el.offsetLeft, "px");
  indicator.style.backgroundColor = el.getAttribute('active-color');
  el.classList.add('is-active');
  
}
items.forEach(function (item, index) {
  item.addEventListener('click', function (e) {
    handleIndicator(e.target);
 
  });
  item.classList.contains('is-active') && handleIndicator(item);
});
</script>
<script>
//  头部滑入效果
var tou =document.querySelector(".tou")
var headerh1=document.querySelector("header>h1")
var headerp=document.querySelector("header>p")
var banerh1=document.querySelector(".baner>h1")
var banerp=document.querySelector(".baner>p")
var baner1h1=document.querySelector(".qd>h1")
var baner1p=document.querySelector(".qd>p")
var baner3h1=document.querySelector(".baner3>h1")
var baner3p=document.querySelector(".baner3>p")
var baner4h1=document.querySelector(".baner4>h1")
var baner4p=document.querySelector(".baner4>p")
var five=document.querySelector(".five")
var four=document.querySelector(".four")
tou.style.top="0"
headerh1.style.opacity="1"
headerh1.style.marginTop="0"
headerp.style.opacity="1"
headerp.style.marginTop="0"

</script>
<script>

    window.onload = f;  //页面初始化时固定其位置
    window.onscroll = f;  //当文档位置发生变化时重新固定其位置
    function f(){  //元素位置固定函数
        var scrolltopTemp=document.documentElement.scrollTop||document.body.scrollTop
       if(scrolltopTemp<350){
        indicator.style.left = "".concat(26, "px")
       }
        if(scrolltopTemp>=350){
            tou.style.backgroundColor="rgba(255, 255, 255, .3)"
            banerh1.style.opacity="1"
            banerh1.style.marginTop="0"
            banerp.style.opacity="1"
            banerp.style.marginTop="40px"

            indicator.style.left = "".concat(26, "px");
  
        }else{
            tou.style.backgroundColor="transparent"
            
        }
        if(scrolltopTemp>=415){
           img1.style.opacity="1"
           setTimeout(function(){
            img2.style.top="65px"
           },3000)
           indicator.style.left = "".concat(143, "px");
        }
        if(scrolltopTemp>=655){
           img3.style.transform="scale(1)"
          
           baner1h1.style.opacity="1"
           baner1p.style.opacity="1"
           baner1p.style.marginTop="50px"
           setTimeout(function(){
            five.style.opacity="1"
           five.style.bottom="-30px"
           },2000)
           indicator.style.left = "".concat(258, "px");
        }
        if(scrolltopTemp>=1330){
        
        
            baner3h1.style.opacity="1"
           baner3p.style.opacity="1" 
           baner3p.style.marginTop="50px"
           four.style.opacity="1"
           indicator.style.left = "".concat(374, "px");
         
        }
        if(scrolltopTemp>=1700){
            img5.style.transform="scale(1)"
            baner4h1.style.opacity="1" 
            baner4p.style.opacity="1"
            baner4p.style.marginTop="50px"
            indicator.style.left = "".concat(491, "px");
    }
        
      
    }
    
</script>
